<!--
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2020/09/20 08:44:20
  @file: navigation-frame.vue
  @description:
  ==================
  navigation-frame
  导航框内部导航项接收一个

  lists:[{
    click: 导航的点击事件，已经绑定为 click.native
    path: 作为导航时候的路径，不做导航则忽略设置默认为 #
    class: 图标类名，左图右边文字
    name
  }]

  active :当做 切换卡的导航使用时候 传入一个active 在该组件内部进行更改
          配合切换卡内容使用
  totalWidth :当每个link的内容不一致导致宽度不一致的时候，
              可以设置一个总长度，然后组件会根据 总长度 / link总数
              分配每个link的宽度
  ==================
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <div class="navigation-frame">
    <template v-for="(item,index) in lists">
      <router-link
        :style="totalWidth ? `width:calc(${totalWidth} / ${lists.length})` : ''"
        @click.native="item.click ? item.click(item, index) : ''"
        :to="item.path ? item.path : '#'"
        :class="active===index ? 'itemActive' : ''"
        :key="index">
        <i :class="item.class ? 'iconfont '+item.class : ''"></i>
        <span>{{item.name}}</span>
      </router-link>
    </template>
  </div>
</template>

<script>
export default {
  name: 'navigation-frame',
  props: {
    lists: { type: Array, require: true },
    active: { type: Number },
    totalWidth: { type: String }
  }
};
</script>

<style lang='scss' scoped>
.navigation-frame {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
  a {
    display: inline-block;
    padding: 30px;
    transition: 0.5s;
    font-size: 20px;
    position: relative;
    box-sizing: border-box;
    &:before {
      content: '|';
      color: #f0f0f0;
      position: absolute;
      left: 0;
      transform: translateX(-50%);
    }
    &:nth-child(1)::before {
      display: none;
    }
    .iconfont {
      font-size: 20px;
      margin-right: 15px;
    }
    &:hover {
      background: var(--themeAColor);
      color: #ffffff;
    }
  }
  .router-link-active {
    background: var(--themeAColor);
    color: #ffffff;
  }
}
</style>
